<template>
    <div>
        <div class="tips border-primary j-border-radius-sm bg-main-opaque pt-14 pb-14 pl-20 pr-20">
            <!-- <i class="icon icon-tips16f j-text-main"></i> -->
            <Iconfont class="icon table-operation-icon" type="a-16_f_ic_about"></Iconfont>
            {{ $t('当前 AD 域可用于 SMB 协议认证') }}
        </div>
        <a-button style="margin-top: 16px;" type='primary' @click="handleCreate">{{ $t('加入AD域') }}</a-button>
        <a-table style="margin-top:16px" class="bigstyle" rowKey="id" :columns='columns' :loading="loading"
            :dataSource='dataList' :locale="defaultSetting" :pagination='pagination' size='small'>
            <template slot="name" slot-scope="name, record">
                <span style="color: #006DB8;cursor: pointer" @click="handleDetail(record)">{{ name }}</span>
            </template>
            <template slot="operate" slot-scope='text, record'>
                <div style="display: flex;justify-content: space-between;">
                    <a-tooltip placement='top'>
                        <template slot='title'>
                            <span>{{ $t('域校验') }}</span>
                        </template>
                        <span style="color: #006DB8;cursor: pointer" @click="handleCheck(record)">{{ $t('域校验') }}</span>
                    </a-tooltip>
                    <a-tooltip placement='top'>
                        <template slot='title'>
                            <span>{{ $t('用户同步') }}</span>
                        </template>
                        <span style="color: #006DB8;cursor: pointer" @click="handleSynchronize(record)">{{ $t('用户同步')
                        }}</span>
                    </a-tooltip>
                    <a-tooltip placement='top'>
                        <template slot='title'>
                            <span>{{ $t('Edit') }}</span>
                        </template>
                        <span style="color: #006DB8;cursor: pointer" @click="handleEdit(record)">{{ $t('Edit') }}</span>
                        <!-- <Iconfont class="icon table-operation-icon" type="icon-edit16f" @click="handleEdit(record)"></Iconfont> -->
                    </a-tooltip>
                    <a-tooltip placement='top'>
                        <template slot='title'>
                            <span>{{ $t('Delete') }}</span>
                        </template>
                        <span style="color: #E01628;cursor: pointer" @click="handleDelete(record.id)">{{ $t('Delete')
                        }}</span>
                    </a-tooltip>
                </div>
            </template>
        </a-table>

        <createAD ref="createAD" @get-list="getList" />
        <modifyAD ref="modifyAD" @get-list="getList" />
        <synchronizeDialog ref="synchronizeRef" @handle-checked="synchronizeCallback" />

    </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
import createAD from './createAD.vue';
import modifyAD from './modifyAD.vue';
import synchronizeDialog from './synchronizeDialog.vue';

export default {
    name: 'AD',
    components: { EmptyData, createAD, modifyAD, synchronizeDialog },
    data() {
        return {
            loading: false,
            dataList: [],
            defaultSetting: { emptyText: <EmptyData /> },
            pagination: {
                defaultPageSize: 10,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger: true,
                pageSizeOptions: ['5', '15', '20', '25'],
                onShowSizeChange: (current, pageSize) => this.pageSize = pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            },
            columns: [
                // { title: '状态', dataIndex: 'status', key: 'status', scopedSlots:{customRender:'status'}, },
                { title: this.$t('接入名称'), dataIndex: 'name', key: 'name', scopedSlots: { customRender: 'name' } },
                { title: this.$t('域管域名'), dataIndex: 'domain_name', key: 'domain_name' },
                { title: 'NetBIOS', dataIndex: 'net_bois', key: 'net_bois' },
                { title: 'DNS IP', dataIndex: 'dns_ip', key: 'dns_ip' },
                { title: this.$t('Username'), dataIndex: 'user', key: "user" },
                { title: this.$t('最近同步时间'), dataIndex: 'sync_time', key: "sync_time", width: 300 },
                { title: this.$t('Operate'), key: "operate", scopedSlots: { customRender: 'operate' }, width: 300 }
            ],
            synchronizeItem: {},
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        async getList() {
            const { data } = await this.$api.authentication.getAuthentication()
            this.dataList = data.ad_list
        },
        handleCreate() {
            this.$refs.createAD.isShow = true
        },
        handleEdit(item) {
            this.$refs.modifyAD.form = { ...item }
            this.$refs.modifyAD.isShow = true
        },
        handleDetail(item) {
            this.$router.push({ path: '/authenticationDetail', query: { id: item.id, name: item.name } })
        },
        async handleSynchronize(item) {
            this.$refs.synchronizeRef.isShow = true
            this.synchronizeItem = { ...item }
        },
        async synchronizeCallback(checked) {
            const item = this.synchronizeItem
            const { domain_name,dns_ip, user, passwd } = item
            const { data } = await this.$api.authentication.synchronizeAuthentication({ domain_name,dns_ip, user, passwd, delete: checked })
            this.model(data.id) //返回模板
            this.notice(data.id, data.params, data.flag) //通知列表显示
            if (data.flag == '0') {
                this.$router.push({ path: '/authenticationDetail', query: { id: item.id, name: item.name } })
            }
        },
        async handleCheck(item) {
            const { domain_name, user, passwd } = item
            const { data } = await this.$api.authentication.checkAuthentication({ domain_name, user, passwd })
            this.model(data.id) //返回模板
            this.notice(data.id, data.params, data.flag) //通知列表显示
        },
        async handleDelete(id) {
            const { data } = await this.$api.authentication.deleteAuthentication({ id })
            this.model(data.id) //返回模板
            this.notice(data.id, data.params, data.flag) //通知列表显示
            if (data.flag == '0') this.getList()
        }
    }
}
</script>
